<script lang="ts">
    import Title from "../../../components/Title/Title.svelte";
</script>

<div class="flex flex-col h-full">
    <Title title="实时报警数据" />
    <div class="flex flex-col w-full overflow-hidden msg-container">
        <div class="flex text-center text-white msg-header">
            <div class="basis-1/3 box-border msg-header-bd">设备名称</div>
            <div class="basis-1/6 box-border msg-header-bd">电压</div>
            <div class="basis-1/6 box-border msg-header-bd">电流</div>
            <div class="basis-1/6 box-border msg-header-bd">转数</div>
            <div class="basis-1/6 box-border msg-header-bd">温度</div>
            <div class="basis-1/6 box-border">CPU</div>
        </div>
        <div class="overflow-hidden" id="review-box">
            <div class="overflow-hidden" id="msg-container">
                <div class="flex text-center text-white msg-box-li">
                    <div class="basis-1/3 truncate	box-border msg-bd">焊接机器人</div>
                    <div class="basis-1/6 truncate	box-border msg-bd bg-1">240V</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">48A</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                </div>
                <div class="flex text-center text-white msg-box-li">
                    <div class="basis-1/3 truncate	box-border msg-bd">搬运机器人</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">240V</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">48A</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                </div>
                <div class="flex text-center text-white msg-box-li">
                    <div class="basis-1/3 truncate	box-border msg-bd">CNC设备</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">240V</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">48A</div>
                    <div class="basis-1/6 truncate	box-border msg-bd bg-2">7935只</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                    <div class="basis-1/6 truncate	box-border msg-bd">2787只</div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .msg-container {
        border: 1px solid #0bc1e5;
        margin-top: 30px;

    }

    .msg-header-bd {
        border-right: 1px solid #0bc1e5;
    }

    .msg-bd {
        border-right: 1px solid #0bc1e5;
        border-bottom: 1px solid #0bc1e5;
    }

    .msg-header {
        border-radius: 2px;
        font-size: 13px;
        color: #0bc1e5;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #0bc1e5;
    }

    .msg-box-li {
        font-size: 13px;
        border-radius: 2px;
        color: #fff;
        height: 50px;
        line-height: 50px;
    }

    .msg-box-li div:first-child {
        color: #0bc1e5;
    }

    #msg-container div:last-child div {
        border-bottom: none;
    }

    .msg-box-li div:last-child {
        border-right: none;
    }

    .bg-1 {
        background: #8C461C;
    }

    .bg-2 {
        background: #0259A6;
    }
</style>
